<template>
  <div class="header">
    <div class="bg">
      <p />
    </div>
    <div class="text">欢迎回来!{{ $store.state.user.userInfo.username }}</div>
    <div class="echarts">
      <div class="left">
        <div class="echartsLeftOne" />
        <div class="echartsLeftTwo" />
      </div>
      <div class="echartsLeftMiddle">中间</div>
    </div>
  </div>
</template>

<script>
import { middleEcharts, myChart } from '@/utils/echarts/middleEcharts'
import { echartsLeftTop, myChart2 } from '@/utils/echarts/echartseftTop'
import { echartsLeftXia, myChart1 } from '@/utils/echarts/echartLeftxia'
export default {
  data() {
    return {

    }
  },
  beforeCreate() {
    this.$store.dispatch('echarts/getAgName')
  },
  mounted() {
    // 中间图开始
    middleEcharts()
    // 有时间封装函数
    window.addEventListener('resize', () => {
      try {
        myChart.resize()
      } catch (error) {
        return error
      }
    })
    window.addEventListener('resize', () => {
      try {
        myChart1.resize()
      } catch (error) {
        return error
      }
    })
    window.addEventListener('resize', () => {
      try {
        myChart2.resize()
      } catch (error) {
        return error
      }
    })
    const dom = document.querySelector('.echartsLeftMiddle')
    // 中间图结束
    // 左一
    echartsLeftTop()
    echartsLeftXia()
    const dom1 = document.querySelector('.echartsLeftOne')
    const dom2 = document.querySelector('.echartsLeftTwo')
    const dom3 = document.querySelector('.bg')
    // 左一结束
    // 可以封装函数
    setTimeout(() => {
      dom.style.opacity = 1
      dom.style.transform = 'translateY(0px)'

      dom1.style.opacity = 1
      dom1.style.transform = 'translateY(0px)'

      dom2.style.opacity = 1
      dom2.style.transform = 'translateY(0px)'

      dom3.style.opacity = 0
    })
  },
  beforeDestroy() {
    myChart1.clear()
    myChart.clear()
    myChart2.clear()
    console.log('图表销毁完成')
    // 解绑事件
    window.removeEventListener('resize', () => {
      myChart.resize()
    })
    window.removeEventListener('resize', () => {
      myChart1.resize()
    })
    window.removeEventListener('resize', () => {
      myChart2.resize()
    })
  }
}
</script>

<style lang="scss" scoped>
.bg{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -999;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../../assets/bg.png);
  transition: all 5s;
  p{
    display: block;
    width: 400px;
    height: 300px;
    background-image: url(../../assets/snipaste_20221115_101902.png);
    background-repeat: no-repeat;
  }
}
.header {
  height: calc(100vh - 50px);
  .text {
    color: white;
    background-color: rgb(46, 48, 50);
    height: 50px;
    display: flex;
    align-items: center;
    font-weight: 700;
    justify-content: center;
  }
  .echarts {
    height: 100%;
    display: flex;
    .left {
      flex: 3;
      display: flex;
      flex-direction: column;
      height: 100%;
      .echartsLeftOne,.echartsLeftTwo {
        position: relative;
        flex: 1;
        padding: 20px;
        transform:translateX(-400px);
        transition: all 2s;
        opacity: 0;
      }
      .echartsLeftTwo{
        transition: all 3s;
        padding-bottom: 65px;
      }
    }
    .echartsLeftMiddle::before,.echartsLeftOne::before,.echartsLeftTwo::before{
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      background-color: #05090f;
      top: 0;
      left: 0;
      filter: blur(6px);
      // opacity: 0.6;
    }

    .echartsLeftMiddle {
      position: relative;
      padding: 20px;
      padding-bottom: 60px;
      flex: 5;
      // border: 1px solid red;
      opacity: 0;
      transition: all 2s;
      transform: translateY(-730px);
    }
  }
}
</style>
